<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>圣诞快乐</title>
<style type="text/css">


@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}
 
.shake-image {
    animation: shake 0.5s infinite;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('./图片/圣诞.jpg'); 
    background-size: cover; 
    background-position: center; 
    z-index: -1; 
    opacity: 0.7;
}
.center-title {
    position: relative;
     top: auto;
    left: 50%; 
    transform: translate(-50%, 0);
    color: rgb(238, 69, 69); 
    font-weight: bold;
    text-align:center ;
    z-index: 1; 
    width: 100%;
    text-shadow: 2px 2px 4px #000; 
    font-family: 华文隶书;
    font-size: 100px;
}
.title-and-image-container {
    position: relative; 
    text-align: center;
    margin-top: 50px;  
}
.title-and-image-container img {
    position: absolute; 
    top: -100px; 
    left: 50%;
    transform: translate(-50%, 0);
}
.right-image-container {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translateY(-50%);
}
.box, .block-span, .christmas-message-span {
    width: 400px;
    height: 60px;
    margin: 30px auto;
    display: block;
    text-align: center;
    line-height: 60px;
    position: relative;
    color: rgb(129, 224, 161);
    font-size: 24px;
    font-weight: bold;
}
.box a, .block-span a {
    color: rgb(139, 221, 171);
    text-decoration: none; 
    font-size: 20px; 
    font-weight: bold; 
}
.christmas-song {
        position: absolute;
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%);
        color: white; 
        font-family: Arial, sans-serif; 
        font-size: 24px;
        text-align: center;
        width: 80%; 
        z-index: 1; 
        background-color: rgba(0, 0, 0, 0.5); 
        padding: 20px; 
        border-radius: 10px;
    }
.christmas-message {
    position: absolute;
    display: inline-block;
    color: rgb(129, 224, 161);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    z-index: 1;
    font-size: 30px;
}
.christmas-message.top-left {
    top: 10%;
    left: 10%;
}
.christmas-message.top-right {
    top: 10%;
    right: 10%;
}
.christmas-message.bottom-left {
    bottom: 10%;
    left: 10%;
}
.christmas-message.bottom-right {
    bottom: 10%;
    right: 10%;
}
.christmas-message-span {
    display: block;
    margin: 15px auto;
    width: 80%; 
}
</style>
</head>
<body>

    <audio id="christmas-song" src="./小囧熊 - Merry Christmas.ogg" preload="auto"></audio>
    <div class="christmas-message top-left">
        <a href="https://www.baidu.com" style="color: inherit; text-decoration: none;">祝你圣诞快乐，阖家幸福！</a>
    </div>
    <div class="title-and-image-container">
            <a href="#" title="点击图片跳转到我的新网页" onclick="event.preventDefault(); confirmRedirect('./新页面.html');">
                <img src="./图片/圣诞帽.png" alt="圣诞帽" class="shake-image" style="width:200px;height:150px;">
            </a>
            <div class="center-title">Merry Christmas</div>
        </div>
    <span class="christmas-message-span">愿你的每一天都充满欢笑与温暖！</span>
    <span class="christmas-message-span">圣诞快乐，愿爱与和平伴随你左右！</span>
    <div onclick="toggleLyrics()">
        <img src="./图片/圣诞老人2.gif" alt="圣诞老人" style="width:200px;height:150;">
    </div>
    <div class="right-image-container">
        <img src="./图片/圣诞老人.gif" alt="圣诞树" class="right-image" style="width:200px;height:150px;">
    </div>
    <span class="christmas-message-span">圣诞佳节，愿你心想事成，万事如意！</span>
    <span class="christmas-message-span">愿这美好的节日带给你无尽的喜悦！</span>
    <div class="christmas-message bottom-left">圣诞快乐，愿爱与和平伴随你左右！</div>
    
    <div id="christmas-lyrics" style="display:none;">
    <div class="christmas-song">
        <p>Merry Christmas to You</p>
        <p>我亲爱的朋友</p>
        <p>圣诞雪为我带去美好的祝福</p>
        <p>Merry Christmas to You</p>
        <p>And happy new year</p>
        <p>我祝你永远平安幸福</p>
        <p>Merry Christmas to You</p>
        <p>我亲爱的朋友</p>
        <p>圣诞雪为我带去美好的祝福</p>
        <p>Merry Christmas to You</p>
        <p>And happy new year</p>
        <p>我祝你永远平安幸福</p>
        <p>我祝你永远平安幸福</p>
    </div>
    <div class="christmas-message bottom-right">圣诞佳节，愿你心想事成，万事如意！</div>
    
    <script>
        function confirmRedirect(url) {
            var userConfirmed = confirm("你确定要跳转到 " + url + " 吗？");
            if (userConfirmed) {
                window.location.href = url;
            }
        }
        function toggleLyrics() {
        var lyrics = document.getElementById('christmas-lyrics');
        var audioPlayer = document.getElementById('christmas-song');
        if (lyrics.style.display === 'block') {
            lyrics.style.display = 'none';
            audioPlayer.pause();
        } else {
            lyrics.style.display = 'block';
            audioPlayer.play();
        }
    }

 function shakeImage() {
            var img = document.querySelector('.shake-image');
            img.classList.add('active');
 
            // 在动画结束后移除active类，以便可以重新触发动画
            img.addEventListener('animationend', function() {
                img.classList.remove('active');
            }, { once: true });
        }

</script>
</body>
</html>